<template>
  <div id="syllabus_document" class="container">
    <div class="content">
      <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item class="title" :to="{path: '/internal_manage/resource_manage'}">资源管理</el-breadcrumb-item>
        <el-breadcrumb-item class="title" :to="backObject">{{parentTitle}}</el-breadcrumb-item>
        <el-breadcrumb-item class="title">{{title}}</el-breadcrumb-item>
      </el-breadcrumb>-->
      <!-- <div class="title">{{title}}</div> -->
      <div class="panel">
        <div class="condition">
          <div class="row_one">
            <div class="back_Btn" @click="goBack">返回</div>
            <div class="right_btn" v-if="hasApi('resourceAdd') && isNotUpdate == '1'" @click="openAdd">新&nbsp&nbsp增</div>
          </div>
        </div>
        <div>
          <table class="table" cellspacing="0">
            <thead class="thead">
              <tr>
                <td style="width: 4rem;">环节名称</td>
                <td style="width: 4rem;">环节资源</td>
                <td style="width: 4rem;">资源类型</td>
                <td style="width: 4rem;">资源状态</td>
                <td style="width: 4rem;">添加时间</td>
                <td style="width: 4rem;">添加人</td>
                <td style="width: 4rem;">操作</td>
              </tr>
            </thead>
            <tbody class="tbody">
              <tr v-for="item,index in resourceList">
                <td v-if="item.isAliasEdit">
                  <el-input
                    placeholder="请输入环节名称"
                    v-model="item.resourceAlias"
                    @blur.prevent="itemEdit(true,item)"
                  >
                    <i
                      slot="suffix"
                      class="el-input__icon el-icon-edit"
                      style="cursor: pointer;"
                      @click="itemEdit(true,item)"
                    ></i>
                  </el-input>
                </td>
                <td v-else>
                  {{item.resourceAlias}}
                  <i
                    v-if="item.processState == 2 && hasApi('resourceUpdate') && isNotUpdate == '1'"
                    class="el-icon-edit nameEdit"
                    @click="item.isAliasEdit =true"
                  ></i>
                </td>
                <td v-if="item.isResEdit">
                  <el-input
                    placeholder="请输入环节资源"
                    v-model="item.resourceName"
                    @blur.prevent="itemEdit(false,item)"
                  >
                    <i
                      slot="suffix"
                      class="el-input__icon el-icon-edit"
                      style="cursor: pointer;"
                      @click="itemEdit(false,item)"
                    ></i>
                  </el-input>
                </td>
                <td v-else style="max-width: 4rem;word-wrap: break-word;">
                  {{item.resourceFileName != '.url'?item.resourceName:item.bosResourceUrl}}
                  <i
                    v-if="item.processState == 2 && item.resourceFileName != '.url' && hasApi('resourceUpdate') && isNotUpdate == '1'"
                    class="el-icon-edit nameEdit"
                    @click="item.isResEdit =true"
                  ></i>
                </td>
                <td>{{item.resourceFileName}}</td>
                <td>{{item.processStateName}}</td>
                <td>{{item.createTime}}</td>
                <td>{{item.createUserName}}</td>
                <td>
                  <div class="edit_btn">
                    <div
                      :class="{btn_img_up_disable:index == 0 ,btn_img_up:index != 0}"
                      v-if="item.processState != 3 && hasApi('resourceOrder') && isNotUpdate == '1'"
                      @click="resourceMove('up',index)"
                    ></div>
                    <div
                      :class="{btn_img_down_disable:index == resourceList.length-1 ,btn_img_down:index != resourceList.length-1}"
                      v-if="item.processState != 3 && hasApi('resourceOrder') && isNotUpdate == '1'"
                      @click="resourceMove('down',index)"
                    ></div>
                    <div
                      class="btn_img_delete"
                      v-if="item.processState != 3 && hasApi('resourceDelete') && isNotUpdate == '1'"
                      @click="resourceDelete(item)"
                    ></div>
                    <div
                      class="btn_img_reupload"
                      v-if="item.processState == 3 && hasApi('resourceDelete') && isNotUpdate == '1'"
                      @click="resourceDelete(item)"
                    >重新上传</div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <el-pagination
          class="page"
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="tabledisplayObj.currPage"
          @size-change="pageSizeChange"
          @current-change="tabledisplayChangePage"
          :total="tabledisplayObj.total"
        ></el-pagination>
      </div>
    </div>
    <resourceImport ref="resourceImport" @callback="closeAdd"></resourceImport>
    <talkcloudImport ref="talkcloudImport" @callback="closeAdd"></talkcloudImport>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex"; //先要引入
import resourceImport from "./common/resource_import";
import talkcloudImport from "./common/talkcloud_import";
let vm;
export default {
  data() {
    return {
      resourceList: [],
      title: "",
      bosBaseUrl: "",
      courseTypeId:"",
      tabledisplayObj: {
        currPage: 1,
        pageSize: 10,
        total: 0,
        resourceParentId: 0
      },
      isNotUpdate:"",
      user:{}
    };
  },
  components: {
    resourceImport,talkcloudImport
  },
  methods: {
    itemEdit(isAlias, item) {
      let paras = {
        resourceParentId: vm.tabledisplayObj.resourceParentId,
        resourceId: item.resourceId
      };
      if (isAlias) {
        paras.resourceAlias = item.resourceAlias;
      } else {
        paras.resourceName = item.resourceName + item.resourceFileName;
      }
      api.resourceUpdate(paras).then(function(data) {
        if (data.resultCode == 2000) {
          tool.message({
            showClose: true,
            message: "编辑成功",
            type: "success"
          });
          item.isResEdit = false;
          item.isAliasEdit = false;
          // vm.initData();
        } else {
          vm.$message.error(data.message);
        }
      });
    },
    /**
     * @param {Object} item 数据
     */
    resourceDelete(item) {
      this.$confirm("此操作将删除该资源文件, 是否继续?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(() => {
          let paras = {
            resourceId: item.resourceId
          };
          api.resourceDelete(paras).then(function(data) {
            if (data.resultCode == 2000) {
              tool.message({
                showClose: true,
                message: "删除成功",
                type: "success"
              });
              vm.initData();
            } else {
              vm.$message.error(data.message);
            }
          });
        })
        .catch(() => {});
    },
    /**
     * @param {Object} direction 方向
     * @param {Object} itemIndex 位置
     */
    resourceMove(direction, itemIndex) {
      if (
        (itemIndex == 0 && direction == "up") ||
        (itemIndex == vm.resourceList.length - 1 && direction == "down")
      )
        return;
      let paras = {
        oneResourceId: 0,
        oneOrderBy: 0,
        twoResourceId: 0,
        twoOrderBy: 0
      };
      console.log(itemIndex);
      vm.resourceList.forEach((item, index) => {
        console.log(item, index);
        //拿到当前item
        if (index == itemIndex) {
          paras.oneResourceId = item.resourceId;
          paras.oneOrderBy = item.orderBy;
        }
        //向上移动则拿到前一个item，否则拿后一个
        if (direction == "up") {
          if (index == itemIndex - 1) {
            paras.twoResourceId = item.resourceId;
            paras.twoOrderBy = item.orderBy;
          }
        } else {
          if (index == itemIndex + 1) {
            paras.twoResourceId = item.resourceId;
            paras.twoOrderBy = item.orderBy;
          }
        }
      });
      api.resourceOrder(paras).then(function(data) {
        if (data.resultCode == 2000) {
          vm.initData();
        } else {
          vm.$message.error(data.message);
        }
      });
    },
    pageSizeChange: function(val) {
      //页条数发生改变
      vm.tabledisplayObj.pageSize = val;
      this.initData();
    },
    /**表格显示形式翻页 */
    tabledisplayChangePage(val) {
      vm.tabledisplayObj.currPage = val;
      this.initData();
    },
    /**
     * 增加返回函数
     */
    closeAdd() {
      this.initData();
    },
    openAdd() {
      if(vm.courseTypeId == 5){
        vm.$refs.talkcloudImport.init({
        resourceParentId: vm.tabledisplayObj.resourceParentId
      });
      }else{
      vm.$refs.resourceImport.init({
        bosBaseUrl: vm.bosBaseUrl,
        resourceParentId: vm.tabledisplayObj.resourceParentId
      });
      }
    },
    /**返回上一页
     *
     */
    goBack() {
      this.$router.go(-1);
    },
    /**
     * 初始化数据
     */
    initData() {
      api.resourceList(vm.tabledisplayObj).then(function(data) {
        if (data.resultCode == 2000) {
          data.list.forEach(item => {
            item.createTime = item.createTime.split(" ")[0];
            let len = item.resourceName.lastIndexOf(".");
            item.resourceFileName = item.resourceName.substring(len); //文件类型
            item.resourceName = item.resourceName.substring(0, len); //文件名
            if (item.processState == 1) {
              item.processStateName = "处理中";
            } else if (item.processState == 3) {
              item.processStateName = "处理失败";
            } else {
              item.processStateName = "处理成功";
            }
            item.isAliasEdit = false;
            item.isResEdit = false;
          });
          vm.resourceList = data.list;
          vm.tabledisplayObj.total = data.totalCount;
        } else {
          vm.$message.error(data.message);
        }
      });
    }
  },
  mounted() {
    vm = this;
    vm.user = tool.getItem(lsKey.user, true); //得到当前用户信息
    let resourceParentId = tool.decode(this.$route.query.resourceParentId);
    vm.tabledisplayObj.resourceParentId = resourceParentId;
    vm.title = this.$route.query.title;
    vm.bosBaseUrl = this.$route.query.bosBaseUrl;
    vm.courseTypeId = this.$route.query.courseTypeId;
    vm.isNotUpdate = this.$route.query.isNotUpdate;
    vm.initData();
  },
  computed: {}
};
</script>

<style lang="scss">
#syllabus_document {
  .el-input__inner {
    border-radius: 0.08rem;
    font-size: 0.16rem;
    color: #666666;
    height: 0.36rem;
    line-height: 0.36rem;
  }

  .el-input__icon {
    line-height: 0.36rem;
  }

  .input_search {
    .el-input__inner {
      background-color: rgb(247, 248, 250);
    }
  }

  .condition {
    padding-bottom: 0rem;
  }

  .syllabusRes {
    text-decoration: underline;
    color: #3885f8;
    font-size: 0.16rem;
    cursor: pointer;
  }

  .el-breadcrumb__separator {
    color: #999999;
  }

  .el-breadcrumb__inner.is-link {
    font-weight: 400;
    color: #141414;
  }

  .el-breadcrumb__inner.is-link:hover {
    color: #3885f8;
  }

  .el-breadcrumb__item:last-child .el-breadcrumb__inner {
    color: #999999;
  }

  .back_Btn {
    color: #3885f8;
    // line-height: 0.5rem;
    float: left;
    padding-left: 0.34rem;
    background-image: url("../../assets/img/education_manage/orderForeignTeacher/back.png");
    background-repeat: no-repeat;
    font-size: 0.18rem;
    background-size: 0.2rem;
    background-position: 0.1rem center;
    cursor: pointer;
  }

  .edit_btn {
    display: flex;
    justify-content: center;
    align-content: center;
    text-align: center;
    height: 0.26rem;
    line-height: 0.26rem;

    .btn_img_down {
      color: #3885f8;
      padding-left: 0.35rem;
      background-image: url("../../assets/img/internal_manage/down.png");
      background-repeat: no-repeat;
      background-size: 0.2rem;
      background-position: 0.1rem center;
      cursor: pointer;
    }

    .btn_img_down_disable {
      color: #3885f8;
      padding-left: 0.35rem;
      background-image: url("../../assets/img/internal_manage/down.png");
      background-repeat: no-repeat;
      background-size: 0.2rem;
      background-position: 0.1rem center;
      cursor: pointer;
      opacity: 0.4;
      filter: alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
    }

    .btn_img_up_disable {
      color: #3885f8;
      padding-left: 0.35rem;
      background-image: url("../../assets/img/internal_manage/up.png");
      background-repeat: no-repeat;
      background-size: 0.2rem;
      background-position: 0.1rem center;
      opacity: 0.4;
      filter: alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
      cursor: pointer;
    }

    .btn_img_up {
      color: #3885f8;
      padding-left: 0.35rem;
      background-image: url("../../assets/img/internal_manage/up.png");
      background-repeat: no-repeat;
      background-size: 0.2rem;
      background-position: 0.1rem center;
      cursor: pointer;
    }

    .btn_img_delete {
      color: #3885f8;
      padding-left: 0.28rem;
      background-image: url("../../assets/img/internal_manage/delete.png");
      background-repeat: no-repeat;
      background-size: 0.14rem;
      background-position: 0.09rem center;
      cursor: pointer;
    }
    .btn_img_reupload {
      color: #3885f8;
      padding-left: 0.28rem;
      background-image: url("../../assets/img/internal_manage/reupload.png");
      background-repeat: no-repeat;
      background-size: 0.14rem;
      background-position: 0.09rem center;
      cursor: pointer;
    }
  }
}
</style>
<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/clue_manage/clue_manage.css"></style>
<style scoped>
.right_btn {
  background-image: url(../../assets/img/clue_manage/add_white.png);
  width: 1.54rem;
}

</style>
